<template>
    <rui-page :defines="defines">
        <rui-table :defineId="'holidayDefine'"
                   :fixedLeft="['year']"
                   :showIndex="false"
                   :select="false"
                   :slots="[{key:'action',slot:'action'}]"
                   :page-able="false"
                   @loadDatas="queryHoliday"
                   ref="holidayTable">
            <template slot="toolBar">
                <Button @click="createHoliday" icon="ios-add" type="primary">新增</Button>
            </template>
            <template slot="action" slot-scope="{ row }">
                <div>
                    <Button @click="view(row)" size="small" type="primary">查看</Button>
                    <Button @click="edit(row)" size="small" type="primary">编辑</Button>
                </div>
            </template>
        </rui-table>
        <Modal
            :closable="false"
            :mask-closable="false"
            :title="modalTitle"
            :width="830"
            v-model="holidayConfig">
            <Form v-if="modalType=='add'" @keydown.enter.native="getHolidayInfo"   ref="holidayForm" :model="holidayForm" :rules="ruleValidate" :label-width="80">
                <FormItem label="年份" prop="year">
                    <Input  style="width: 150px" v-model="holidayForm.year" placeholder="输入年份" >
                        <Button slot="append" icon="ios-search" @click="getHolidayInfo"></Button>
                    </Input>
                </FormItem>
            </Form>

            <div style="width: 100%;padding: 5px"  class="holiday" v-if="loadHolidayInfo">
                <div v-for="month in months" >
                    <div style="width: 177px;float: left;margin: 10px;border-right: 1px silver solid;border-left: 1px silver solid;">
                        <div style="text-align: center;background: silver">
                            {{monthsDesc[month.month]}}
                        </div>
                        <div style="text-align: center;height: 25px ">
                            <span style="border-right: 1px silver solid;">日</span>
                            <span style="border-right: 1px silver solid;">一</span>
                            <span style="border-right: 1px silver solid;">二</span>
                            <span style="border-right: 1px silver solid;">三</span>
                            <span style="border-right: 1px silver solid;">四</span>
                            <span style="border-right: 1px silver solid;">五</span>
                            <span>六</span>
                        </div>
                        <div style="height: 150px">
                            <div v-for="(week) in month.weeks" style="height:25px">
                                <span v-for="(day,dayIndex) in week.days">
                                    <span @click="changeHoliday(day.dayOfYear)" v-if="day.dayOfMonth>0&&holiday[day.dayOfYear]==='1'" :style="{borderRight:(dayIndex===6?'':'1px silver solid')}" class="afs-holiday">{{day.dayOfMonth}}</span>
                                    <span @click="changeHoliday(day.dayOfYear)" v-else-if="day.dayOfMonth>0&holiday[day.dayOfYear]==='0'" :style="{borderRight:(dayIndex===6?'':'1px silver solid')}" class="afs-normal">{{day.dayOfMonth}}</span>
                                    <span v-else :style="{borderRight:(dayIndex===6?'':'1px silver solid')}"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div v-if="(month.month+1)%4==0" class="clear"></div>
                </div>
            </div>
            <div slot="footer">
                <Button @click="holidayConfig = false" size="small">取消</Button>
                <Button v-if="modalType !=='view'" @click="saveHolidayInfo" size="small" :disabled="!loadHolidayInfo" type="primary">保存</Button>
            </div>
        </Modal>
    </rui-page>
</template>
<style>
    .holiday span{
        width: 25px;
        height: 25px;
        display: block;
        float: left;
        text-align: center;
        line-height: 25px;
        border-bottom: 1px silver solid;
    }
    .clear{
        clear: both;
    }
    .afs-holiday{
        background: #ec9d92;
    }
    .afs-normal{
        background: #ded8d8;
    }
</style>
<script>
import holidayDefine from "./define/holiday-define";
import {listHoliday,holiday,saveHoliday} from "_p/basic/api/admin/holiday"
export default {
    name: "holiday-config",
    data() {
        return {
            modalTitle:'节假日',
            holidayConfig:false,
            modalType:'add',
            defines:[{
                id: 'holidayDefine',
                fields: holidayDefine
            }],
            ruleValidate:{
                year: [
                    { required: true, message: '年份不能为空', trigger: 'blur' },
                    { pattern: /^2\d{3}$/, message: '请输入正确年份', trigger: 'blur' }
                ],
            },
            monthsDesc:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
            holiday:[],
            months:[],
            holidayForm:{
                year:''
            },
            loadHolidayInfo:false
        };
    },
    methods: {
        queryHoliday(queryData) {
            listHoliday().then(res => {
                if (res.code === "0000") {
                    this.$refs.holidayTable.updateTableData(res.data, 100);
                }
            });
        },
        getHolidayInfo(){
            this.$refs['holidayForm'].validate((valid) => {
                if (valid) {
                    holiday(this.holidayForm.year).then(res=>{
                        if (res.code === "0000") {
                            this.months.splice(0,this.months.length);
                            this.months.push(...res.data);
                            this.holiday.splice(0,this.holiday.length);
                            this.months.forEach(month=>{
                                month.weeks.forEach(week=>{
                                    week.days.forEach(day=>{
                                        if(day.holiday==='0'){
                                            this.holiday.push('0');
                                        }else if(day.holiday==='1'){
                                            this.holiday.push('1');
                                        }
                                    })
                                })
                            })
                            this.loadHolidayInfo = true;
                        }
                    })
                }
            })
        },
        changeHoliday(dayOfYear){
            if(this.modalType==='view'){
                return ;
            }
            if(this.holiday[dayOfYear]==='0'){
                this.holiday.splice(dayOfYear,1,'1');
            }else{
                this.holiday.splice(dayOfYear,1,'0');
            }
        },
        edit(row){
            this.holiday.splice(0,this.holiday.length);
            this.modalType = 'modify';
            this.loadHolidayInfo = false;
            this.modalTitle='维护'+row.year+'年节假日';
            this.holidayForm.year = row.year;
            holiday(row.year).then(res=>{
                if (res.code === "0000") {
                    this.months.splice(0,this.months.length);
                    this.months.push(...res.data);
                    this.holiday.splice(0,this.holiday.length);
                    this.months.forEach(month=>{
                        month.weeks.forEach(week=>{
                            week.days.forEach(day=>{
                                if(day.holiday==='0'){
                                    this.holiday.push('0');
                                }else if(day.holiday==='1'){
                                    this.holiday.push('1');
                                }
                            })
                        })
                    })
                    this.loadHolidayInfo = true;
                    this.holidayConfig = true;
                }
            })
        },
        view(row){
            this.holiday.splice(0,this.holiday.length);
            this.modalType = 'view';
            this.loadHolidayInfo = false;
            this.modalTitle='查看'+row.year+'年节假日';
            this.holidayForm.year = row.year;
            holiday(row.year).then(res=>{
                if (res.code === "0000") {
                    this.months.splice(0,this.months.length);
                    this.months.push(...res.data);
                    this.holiday.splice(0,this.holiday.length);
                    this.months.forEach(month=>{
                        month.weeks.forEach(week=>{
                            week.days.forEach(day=>{
                                if(day.holiday==='0'){
                                    this.holiday.push('0');
                                }else if(day.holiday==='1'){
                                    this.holiday.push('1');
                                }
                            })
                        })
                    })
                    this.loadHolidayInfo = true;
                    this.holidayConfig = true;
                }
            })
        },
        createHoliday(){
            this.holiday.splice(0,this.holiday.length);
            this.modalType = 'add';
            this.holidayConfig = true;
            this.loadHolidayInfo = false;
            this.modalTitle='新建节假日';
        },
        saveHolidayInfo(){
            if(this.modalType=='add') {
                this.$refs['holidayForm'].validate((valid) => {
                    if (valid) {
                        saveHoliday(this.holidayForm.year, this.holiday.join('')).then(res => {
                            if (res.code === "0000") {
                                this.$Message.info('保存成功');
                                this.$nextTick(() => {
                                    this.modalType = 'add';
                                    this.holidayForm.year = '';
                                    this.holidayConfig = false;
                                    this.loadHolidayInfo = false;
                                    this.holiday.splice(0, this.holiday.length);
                                    this.$refs['holidayTable'].reloadData();
                                })
                            }
                        }).catch(() => {
                            this.loadHolidayInfo = true;
                        })
                    }
                })
            }else{
                saveHoliday(this.holidayForm.year, this.holiday.join('')).then(res => {
                    if (res.code === "0000") {
                        this.$Message.info('保存成功');
                        this.$nextTick(() => {
                            this.modalType = 'add';
                            this.holidayForm.year = '';
                            this.holidayConfig = false;
                            this.loadHolidayInfo = false;
                            this.holiday.splice(0, this.holiday.length);
                            this.$refs['holidayTable'].reloadData();
                        })
                    }
                }).catch(() => {
                    this.loadHolidayInfo = true;
                })
            }
        }
    },
    computed: {

    },
    created(){

    },
    mounted() {
        this.$refs['holidayTable'].reloadData();
    }
};
</script>
